<template>
  <div class="select-subject">
    <div class="table">
      <el-table
        ref="selectTable"
        :data="selectData.slice((currentpage-1)*pagesize,currentpage*pagesize)"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
        @select="handleSelectChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="名称" min-width="10" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handlePush(scope)">{{ scope.row.title }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="教师" min-width="10" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleUserDialog(scope)">{{ scope.row.userName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="planNum" label="教学计划数" min-width="10" align="center"/>
        <el-table-column prop="price" label="当前原价" min-width="10" align="center"/>
        <el-table-column prop="selectStatus" label="状态" min-width="10" align="center">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.selectStatus }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :current-page="currentpage"
        :page-size="pagesize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
      <user-dialog
        :visiabledialog="userdialog"
        :dialog-data="dialogData"
        @changeVisiable="userdialog = false"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import UserDialog from '@/components/Dialog'
import { getUserDetail } from '@/api/operate/userDetail' // 数据接口
export default {
  name: 'Selectsubject',
  components: {
    UserDialog,
    Pagination
  },
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      total: 1,
      currentpage: 1,
      pagesize: 10,
      userdialog: false,
      dialogData: {}
    }
  },
  computed: {
    selectData() {
      return this.tableData
    }
  },
  watch: {
    selectData(val) {
      console.log(val)
      this.toggleRowSelection(val)
    }
  },
  methods: {
    // 切换选中状态
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.selectTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.selectTable.clearSelection()
      }
    },
    handleSizeChange(val) {
      console.log(val)
      this.currentpage = 1
      this.pagesize = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleCurrentChange(val) {
      console.log(val)
      this.currentpage = val.value
      if (this.pagesize >= 20) {
        scrollTo(50, 800)
      }
    },
    handleSelectChange(val, row) {
      // 仅操作当前选中行
      if (row.status === '未选择') {
        row.status = '已选择'
      } else {
        row.status = '未选择'
      }
    },
    handleSelectionChange(val) {
      this.$emit('selectNumber', val.length)
    },
    handlePush(scope) {
      // 跳转到门户网站
      console.log(scope.row)
    },
    handleUserDialog(scope) {
      // 个人信息dialog
      getUserDetail(scope.row.userId).then(response => {
        this.dialogData = response.data.item
      })
      this.userdialog = true
    }
  }
}
</script>

<style lang="scss">
</style>
